<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" 		Click the '...' button to display the calendar. Notice that you can set the time at the bottom of the calendar. 		You cannot select Sundays. 		Select any Friday of the month. 		On Fridays, you cannot set times earlier than 08:00 and later than 21:45. 		On Saturdays, you can set only times between 11:00 and 17:00. 		Select any day of the month except Friday, Saturday or Sunday. 		You can set any time you want. 		Set the time to 23:00, and then change the day to Saturday. Notice that the time 		automatically scrolls past 11:00, since that is the earliest valid time for that day. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Limit Time and Day Selection</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type='text/javascript' src='../../utils/zpdict.js'></script>
		<script type="text/javascript" src="../../utils/lang/zpdate-en.js"></script>
		<script type="text/javascript" src="../../utils/zpdate.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../themes/wood.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Limit Time and Day Selection</div>

		<div class='zpCalDemoText'>
			<ul>
				<li>This demo uses the <b>wood theme</b>.</li>
				
		<li>Click the '...' button to display the calendar. Notice that you can set the time at the bottom of the calendar.</li>
		<li>You cannot select Sundays.</li>
		<li>Select any Friday of the month.</li>
		<li>On Fridays, you cannot set times earlier than 08:00 and later than 21:45.</li>
		<li>On Saturdays, you can set only times between 11:00 and 17:00.</li>
		<li>Select any day of the month except Friday, Saturday or Sunday.</li>
		<li>You can set any time you want.</li>
		<li>Set the time to 23:00, and then change the day to Saturday. Notice that the time
		automatically scrolls past 11:00, since that is the earliest valid time for that day.</li>

			</ul>
		</div>


<b>Date :</b>
<input type="text" name="date9" id="sel9" size="30">
<input type="button" value=" ... " id='button9'>
<script type="text/javascript">
	<!--  to hide script contents from old browsers

	function timeOutOfRange(date, year, month, day, hours, minutes) {
		if (date.getDay() == 0) { //No Sunday
			return true;
		}
		if (typeof(hours) != "undefined") {
			if (date.getDay() == 6) {
				//only allow 11AM to 5PM on Saturday
				if ((hours < 17 || hours==17 && minutes==0) && hours >= 11) {
					return false;
				} else {
					return true;
				}
			}

			//on saturdays allow
			if (date.getDay() == 5) {
				//only allow 8AM to 9:45PM on Friday
				if (hours > 21 || hours < 8) {
					return true; //not within the hours
				}

				if (hours != 21) {
					return false; //within the hours
				}

				//hours = 21
				if (minutes <= 45) {
					return false;
				} else {
					return true;
				}
			}

		}
		return false;
	}
// end hiding contents from old browsers  -->
</script>

		<script type="text/javascript">
		var cal = new Zapatec.Calendar({
		
		inputField     :    "sel9",     // id of the input field
		singleClick    :     false,     // require two clicks to submit
		ifFormat       :    '%a, %b %e, %Y [%H:%M]',     // format of the input field
		showsTime      :     true,     // show time as well as date
		button         :    "button9",  // trigger button
		dateStatusFunc :    timeOutOfRange,
		theme          :    "wood"

		});
		
		
	</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2009 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>
